<template>
	<view class="">
		<view class="header1">
			<view class="ipt-box">
				<input v-model="searchIpt" type="text" value="" :placeholder="prompt" placeholder-class="plac-class" />
				<image src="/static/search1.png" mode="" @tap="searNum"></image>
			</view>
			<view class="header1-right" @tap="clousText">
				<span>取消</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchIpt: ''
			}
		},
		props: {
			prompt: {
				default: '请输入您要搜索的内容',
				type: String
			}
		},
		methods: {
			clousText() {
				this.searchIpt = ''
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 400)
			},
			searNum() {
				if (!this.searchIpt) {
					uni.showToast({
						title: '请输入要搜索的内容',
						icon: 'none'
					})
					return
				}
				let value = this.searchIpt
				this.searchIpt = ''
				this.$emit('SearchEvents', value)
			}
		}
	}
</script>

<style lang="less" scoped>
	.header1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;

		.ipt-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 580rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 24rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.header1-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #E2ECFB;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>
